<template>
  <div class="search">
    <van-search
      v-model="value"
      shape="round"
      show-action
      background="#ff6a6c"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch" class="seah">搜索</div>
      </template>
    </van-search>
    <div class="history">
      <div class="del">
        <span>历史记录</span>
        <van-icon name="delete-o" size="18px" @click="onDel" />
      </div>
      <div class="item">
        <div v-for="(item, index) in historyKeywordList" :key="index">
          <div>{{ item.keyword }}</div>
        </div>
      </div>
    </div>
    <div class="find">
      <div>
        <span>搜索发现</span>
      </div>
      <div class="title">{{ defaultKeyword.keyword }}</div>
    </div>
    <van-action-sheet v-model="show" title="相关商品">
      <div class="content">
        <div v-for="(item, index) in list" :key="index">
          <van-card
            v-if="list.length != 0"
            :price="item.retailPrice | Price"
            :desc="item.brief"
            :title="item.name"
            :thumb="item.picUrl"
          />
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { Search, Toast, Card, Icon, ActionSheet } from "vant";
import API from "@/utils/api.js";
export default {
  data() {
    return {
      value: "",
      list: [],
      historyKeywordList: [],
      defaultKeyword: [],
      show: false,
    };
  },
  created() {
    this.getIndex();
  },
  methods: {
    onSearch() {
      this.$get(API.GET_GOODS_LIST, {
        keyword: this.value,
      }).then((res) => {
        console.log("搜索", res);
        this.list = res.data.list;
        if (res.data.list.length === 0) {
          Toast.fail("查不到该商品");
          this,show = false
        }
        this.getIndex();
        this.show = true
      });
    },
    onDel() {
      this.$post(API.POST_SEARCH_CLEARHISTORY, {
        token: this.$store.state.token,
      }).then((res) => {
        console.log("清空", res);
        if (this.historyKeywordList.length === 0) {
          Toast("没有要清空的内容了");
        } else {
          Toast.success("已清空");
        }
        this.getIndex();
      });
    },
    getIndex() {
      this.$get(API.GET_SEARCH_INDEX, {
        token: this.$store.state.token,
      }).then((res) => {
        console.log(res);
        this.historyKeywordList = res.data.historyKeywordList.reverse();
        this.defaultKeyword = res.data.defaultKeyword;
      });
    },
  },
  components: {
    [Search.name]: Search,
    [Toast.name]: Toast,
    [Card.name]: Card,
    [Icon.name]: Icon,
    [ActionSheet.name]: ActionSheet,
  },
  filters: {
    Price: (value) => {
      return value + ".00";
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  margin-top: 46px;
  margin-bottom: 50px;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  color: #444;
  .seah {
    color: white;
  }
  .history {
    width: 90%;
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    font-size: 16px;
    .del {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .item {
      width: 90%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 12px;
      div {
        display: flex;
        align-items: center;
        padding: 4px 4px;
        margin: 2px 4px;
        font-size: 12px;
        color: #888;
        background-color: #f4f4f4;
        border-radius: 14px;
      }
    }
  }
  .find {
    width: 90%;
    margin: 20px auto;
    font-size: 16px;
    .title {
      font-size: 10px;
      margin-top: 8px;
      background-color: #f4f4f4;
      text-align: center;
      width: 100px;
      border-radius: 16px;
      padding: 10px 10px;
      color: #888;
    }
  }
  .content {
    padding: 16px 0px 160px;
  }
  .van-card__price {
    color: rgb(238, 74, 74);
  }
}
</style>